<template>
  <div class="wenjuan">
    <Form ref="form" :model="basicInfo" :label-width="120">
      <FormItem label="场馆名称:">
        <Input
          v-model="basicInfo.name"
          placeholder="请输入场馆名称"
          style="width: 300px; margin-left: 0px"
        ></Input>
      </FormItem>
      <FormItem label="场馆主图:">
        <div style="width: 300px">
          <vue-uploadimg
            :imgUrl="imgUrl"
            :clear="clear1"
            @uploadImg="uploadImg"
          ></vue-uploadimg>
        </div>
      </FormItem>
      <FormItem label="场馆简介:">
        <Input
          v-model="basicInfo.about"
          type="textarea"
          style="width: 300px; margin-left: 0px"
          :rows="4"
          placeholder="请输入简介"
        ></Input>
      </FormItem>
      <!-- <FormItem label="开放时间:">
        <input
          v-model="openTime"
          disabled
          placeholder="请输入开放时间"
          style="width: 300px; margin-left: 0px"
        />
        <span style="color: red">仅作展示</span>
      </FormItem> -->
      <FormItem label="开闭馆时间:">
        <Time-picker
          format="HH:mm"
          placeholder="选择时间"
          v-model="basicInfo.summerTime[0]"
          style="width: 112px"
          @on-change="changeSumT1"
        ></Time-picker>
        <Time-picker
          format="HH:mm"
          placeholder="选择时间"
          v-model="basicInfo.summerTime[1]"
          style="width: 112px"
          @on-change="changeSumT2"
        ></Time-picker>
        <Time-picker
          format="HH:mm"
          placeholder="选择时间"
          v-model="basicInfo.summerTime[2]"
          style="width: 112px"
          @on-change="changeSumT3"
        ></Time-picker>
      </FormItem>
      <!-- <FormItem label="冬季开闭馆时间:">
        <Time-picker
          format="HH:mm"
          placeholder="选择时间"
          v-model="basicInfo.winterTime[0]"
          style="width: 112px"
          @on-change="changeWinT1"
        ></Time-picker>
        <Time-picker
          format="HH:mm"
          placeholder="选择时间"
          v-model="basicInfo.winterTime[1]"
          style="width: 112px"
          @on-change="changeWinT2"
        ></Time-picker>
        <Time-picker
          format="HH:mm"
          placeholder="选择时间"
          v-model="basicInfo.winterTime[2]"
          style="width: 112px"
          @on-change="changeWinT3"
        ></Time-picker>
      </FormItem> -->
      <FormItem label="咨询电话:">
        <Input
          v-model="basicInfo.contactNumber"
          type="number"
          placeholder="请输入手机号"
          :style="{ width: '300px' }"
        ></Input>
      </FormItem>

       <FormItem label="请设置馆内实时在线人数:">
        <Input
          v-model="basicInfo.ssrenNumber"
          type="number"
          placeholder="请输入人数"
          :style="{ width: '300px' }"
        ></Input>
      </FormItem>

      <FormItem label="场馆地址:">
        <div class="address">
          <Button type="warning" @click="openModel"
            >点击按钮，在弹窗中搜索位置</Button
          >
          <Input
            type="text"
            disabled
            v-model="basicInfo.address"
            :style="{ width: '400px', marginLeft: '30px' }"
          ></Input>
        </div>
        <!-- 浙江省杭州市拱墅区湖墅南路260号财贸大楼5楼 -->
        <!-- <editoritem :value="editorData" @catchData="catchData"></editoritem> -->
      </FormItem>

      <div style="width: 100%; text-align: right">
        <Form-item>
          <Button type="primary" @click="handleSubmit('form')">提交</Button>
          <!-- <Button @click="handleReset('form')" style="margin-left: 8px"
              >取消</Button
            > -->
        </Form-item>
      </div>
    </Form>

    <Modal
      title="地图"
      :mask-closable="false"
      :closable="false"
      width="70"
      v-model="mapModel"
      @on-ok="submitAddress"
      @on-cancel="closeModal"
    >
      <!--地图模块-->
      <div>
        <div class="mb-10">
          <!-- <Form ref="form" :model="model" :label-width="120">
            <FormItem label="请输入地址:"> -->
          请输入地址
          <Input
            v-model="model.address"
            type="text"
            placeholder="请输入地址"
            :style="{ width: '300px' }"
            @on-change="confirmAddress"
          ></Input>
          <!-- </FormItem>
          </Form> -->
        </div>

        <baidu-map
          ak="9meFZIIUYALAnFGxXNu9rB082eCdEH2M"
          scroll-wheel-zoom
          @ready="mapReady"
        >
          <bm-view class="map"></bm-view>

          <!--搜索-->
          <bm-local-search
            :keyword="keyword"
            :panel="isShowPanel"
            auto-viewport
            :zoom="10"
            style="display: none"
            :location="location"
            @markersset="setAddressList"
          ></bm-local-search>

          <!--点标注-->
          <bm-marker-clusterer averageCenter>
            <bm-marker :position="location" />
          </bm-marker-clusterer>
          <!-- 缩放尺 -->
          <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT" />
        </baidu-map>
      </div>
    </Modal>
  </div>
</template>

<script>
import BmInfoWindow from "vue-baidu-map/components/overlays/InfoWindow"; //标注弹窗
import BaiduMap from "vue-baidu-map/components/map/Map.vue";
import BmView from "vue-baidu-map/components/map/MapView.vue";
import BmNavigation from "vue-baidu-map/components/controls/Navigation";
import BmMarkerClusterer from "vue-baidu-map/components/extra/MarkerClusterer";
import BmMarker from "vue-baidu-map/components/overlays/Marker";
import BmLocalSearch from "vue-baidu-map/components/search/LocalSearch.vue";

let geocoder;
export default {
  name: "BasicInfo",
  props: {},
  components: {
    BaiduMap,
    BmView,
    BmNavigation,
    BmMarkerClusterer,
    BmMarker,
    BmLocalSearch,
    BmInfoWindow,
  },
  data() {
    return {
      center: { lng: 0, lat: 0 },
      zoom: 3,
      openTime: "每天09:00-19:00",
      basicInfo: {
        name: "",
        pic: "",
        summerTime: [],
        winterTime: [],
        contactNumber: "",
        ssrenNumber:'',
        address: "",
        about: "",
        lat: "",
        lng: "",
      },
      winterTime: [],
      summerTime: [],
      imgUrl: "",
      clear1: false,
      time: [],
      mapModel: false,
      model: {},
      location: {
        lng: 120.143778,
        lat: 30.251243,
      },
      isShowPanel: true,
      BMap: {},
      map: {},
      inputValue: "",
      keyword: "",
    };
  },
  watch: {
    museumId(newV) {
      this.subjectContent.museumId = newV;
      this.subject_condition.museumId = newV;
      this.getSubject();
    },
  },
  created() {
    this.getBasicInfo();
  },
  methods: {
    // 获取数据
    getBasicInfo() {
      this.$http(
        "/chongqing/stage/org-basic-info/getOrgBasicInfoDetail",
        {},
        "get",
        (res) => {
          console.log(res);
          if (res.data.code == 1000) {
            console.log(res.data.data);
            // this.basicInfo = res.data.data

            console.log(this.model, 1111111);
            let info = res.data.data;
            this.imgUrl = info.pic;
            this.basicInfo = {
              ssrenNumber:info.limitPeople,
              name: info.name,
              pic: info.pic,
              summerTime: info.summerOpeningClosingTime.split("-"),
              winterTime: info.winterOpeningClosingTime.split("-"),
              contactNumber: info.contactNumber,
              address: info.address,
              about: info.about,
              lat: info.lat,
              lng: info.lng,
            };
          } else {
            that.$Message.error(res.data.msg);
          }
        }
      );
    },
    handleSubmit(form) {
      let that = this;
      this.$refs[form].validate((valid) => {
        if (valid) {
          console.log(valid);
          this.$http("/chongqing/stage/org-basic-info/updateOrgBasicInfo",
            {
              about: this.basicInfo.about,
              address: this.basicInfo.address,
              contactNumber: this.basicInfo.contactNumber,
              limitPeople:this.basicInfo.ssrenNumber,
              lat: this.basicInfo.lat,
              lng: this.basicInfo.lng,
              name: this.basicInfo.name,
              pic: this.basicInfo.pic,
              summerOpeningClosingTime: this.basicInfo.summerTime.join("-"),
              winterOpeningClosingTime: this.basicInfo.winterTime.join("-"),
            },
            "post",
            (res) => {
              if (res.data.code == 1000) {
                that.$Message.success(res.data.msg);
              } else {
                that.$Message.error(res.data.msg);
              }
            }
          );
        } else {
          this.$Message.error("表单验证失败!");
        }
      });
    },
    // 图片上传
    uploadImg(data) {
      this.imgUrl = data;
      this.basicInfo.pic = data;
    },
    // 时间选择器
    changeOrder(data) {
      console.log(data);
      this.time = data;
    },
    // 夏季选择器
    changeSumT1(data) {
      this.summerTime[0] = data;
    },
    changeSumT2(data) {
      this.summerTime[1] = data;
    },
    changeSumT3(data) {
      this.summerTime[2] = data;
    },
    // 冬季选择器
    changeWinT1(data) {
      console.log(data);
      this.winterTime[0] = data;
    },
    changeWinT2(data) {
      console.log(data);
      this.winterTime[1] = data;
    },
    changeWinT3(data) {
      console.log(data);
      this.winterTime[2] = data;
    },
    // 打开弹窗
    openModel() {
      this.model = {
        address: this.basicInfo.address,
      };
      this.confirmAddress();
      this.mapModel = true;
    },
    handleConfirm({ item }) {
      const that = this;
      let queryString = `${item.value.city}${item.value.district}${item.value.business}`;
      var myGeo = new BMap.Geocoder();
      myGeo.getPoint(queryString, function (point) {
        if (point) {
          // console.log(point, "point");
          that.location = point;
        }
      });
    },
    mapReady({ BMap, map }) {
      this.BMap = BMap;
      this.map = map;
      let that = this;
      geocoder = new BMap.Geocoder(); //创建地址解析器的实例
      if (this.model.hasOwnProperty("address")) {
        //如果当前model中包含address 则证明是修改表单数据（地址存在，打开表单显示地址标点）
        this.keyword = this.model.address;
      } else {
        //否则显示默认标点（这里的经纬度代表成都）
        //第二个参数  10 代表地图缩放级别,最大为19,最小为0
        console.log(that.basicInfo.lng, that.basicInfo.lat);
        this.map.centerAndZoom(
          new BMap.Point(that.basicInfo.lng, that.basicInfo.lat),
          15
        );
      }
      map.addEventListener("click", ({ point }) => {
        this.location.lng = point.lng;
        this.location.lat = point.lat;
        geocoder.getLocation(point, (res) => {
          this.model.address = res.address;
          console.log("11当前所在位置信息", res);
          console.log("当前所在位置信息", this.model.address);
          this.model.lng = point.lng;
          this.model.lat = point.lat;
          this.$forceUpdate();
        });
      });
    },
    setAddressList(e) {
      //这里是搜索位置的一些相关数据
      console.log(e);
    },
    confirmAddress(e) {
      console.log(this.model.address);
      console.log("this.model.address:", this.model.address);
      if (this.inputValue != "") {
        console.log("输入框不为空赋值输入框的值");
        this.keyword = this.inputValue;
      } else if (this.model.address != undefined) {
        console.log("输入框不为空 地址也不为空 赋值地址的值");
        this.keyword = this.model.address;
      }

      //为啥使用延时？？
      //因为上面搜索框是change事件，变化的太快了看起来效果不好所以添加了延时
      setTimeout(() => {
        //搜索时把需要标点的地址传入local.search中
        var local = new BMap.LocalSearch(this.map, {
          renderOptions: { map: this.map },
        });
        local.search(this.keyword);
      }, 600);
    },
    submitAddress() {
      this.basicInfo.address = this.model.address;
      this.basicInfo.lng = this.model.lng
      this.basicInfo.lat = this.model.lat
      this.closeModal();
    },
    closeModal() {
      this.mapModel = false;
      this.model = {};
    },
  },
};
</script>

<style lang="less" scoped>
.address {
  display: flex;
}

.map {
  width: 100%;

  height: 500px;
}

.more_panel {
  text-align: center;

  font-size: 12px;

  color: #2878ff;

  padding-top: 10px;

  span {
    cursor: pointer;

    i {
      transform: rotate(90deg);
    }
  }

  span.down {
    i {
      transform: rotate(-90deg);
    }
  }
}
</style>
